<template>
	<div class="url2qr-page">
        <div class="row">
			<div class="col-70">
				<input v-model="url" style="width:100%;">
			</div>
			<div class="col-30">
				<cc-button xsmall @click="create">生成</cc-button>
			</div>
		</div>

		<div id="qrcode" style="width:100%;">
		</div>
    </div>
</template>
<script type="text/javascript">

	module.exports = {
		data: function() {
			return {
				url: "https://wap.baidu.com"
			}
		},
		mounted: function() {
            // $('#qrcode').qrcode(this.url); 
            this.createQrcode(this.url);
        },
        activated: function() {
            // var params = this.$route.query;
            var params = this.$route.params;
            console.log(params);
            if(params.url != null) {
                this.url = params.url;
                this.create();
            }
        },
		methods: {

            createQrcode(text) {
                $('#qrcode').html('');
				$('#qrcode').qrcode({
                    text : text,
                    width: 350,
                    height: 350
                });
            },
			create: function() {
				this.createQrcode(this.url);
				console.log("生成二维码");
            },
           
		}
	}
</script>
<style type="text/css">
	.url2qr-page .button-list {
		margin:10px;
	}
	.url2qr-page .button-list button {
	}
	.url2qr-page #qrcode {
		margin-top: 10px;
	}
    .url2qr-page .cc-button-div{
        
    }
    .url2qr-page input {
        margin-top: 6px;
        /* line-height: 20px; */
    }
	
</style>